<template>
  <div v-loading="loading">
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/recordFiling/page' }"
      >备案管理</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item label="园所类型" prop="region" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="服务类型" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="园所性质" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="园所名称" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="成立时间" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="法人代表" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="机构负责人" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="联系电话" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="托位数" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item
                label="备案托位建设数"
                label-width="140px"
                prop="name"
                style="width: 24%"
              >
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">师资信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules1"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item label="教师职工" prop="region" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="保育师人数" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="托育师人数" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="育婴员人数" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item
                label="幼儿照护人数"
                label-width="120px"
                prop="name"
                style="width: 24%"
              >
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item
                label="幼儿教师人数"
                label-width="120px"
                prop="name"
                style="width: 24%"
              >
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="保安人数" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item
                label="卫生保健人数"
                label-width="120px"
                prop="name"
                style="width: 24%"
              >
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="炊事人员" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">场地信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules2"
              label-width="100px"
              class="demo-ruleForm"
              style="display: flex; flex-wrap: wrap"
            >
              <el-form-item
                label="园所所在区域"
                prop="region"
                label-width="120px"
                style="width: 24%"
              >
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="具体位置" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="场地类型" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="园所规模" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
              <el-form-item label="食品经营" prop="name" style="width: 24%">
                <el-input v-model="ruleForm.name" disabled placeholder="暂无信息" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0">
      <div class="obj_title">其他证明文件</div>
      <div
        v-for="(item, index) in fielForList"
        :key="index"
        class="obj_bt_box"
        style="display: flex; margin-top: 30px"
      >
        <div class="box_label" style="width: 150px">
          <span style="color: red; margin-right: 4px">*</span>{{ item.name }}：
        </div>
        <div class="box_value">
          <el-upload
            action="/api/system/upload"
            list-type="picture-card"
            :auto-upload="true"
            :file-list="fileSumList[item.filelistShowName]"
            disabled
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                style="height: 148px"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="text">{{ file.name }}</span>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <!-- <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file,item)"
                >
                  <i class="el-icon-delete"></i>
                </span> -->
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
    </div>
    <div class="cad-box" style="margin: 20px 0">
      <div class="obj_title">佐证信息</div>
      <div class="obj_bt_box" style="display: flex; margin-top: 30px">
        <div class="box_label">
          <span style="color: red; margin-right: 4px">*</span>工商执照：
        </div>
        <div class="box_value">
          <el-upload
            action="/api/system/upload"
            list-type="picture-card"
            :auto-upload="true"
            :file-list="fileListOhterShow"
            disabled
          >
            <i slot="default" class="el-icon-plus" />
            <div slot="file" slot-scope="{ file }">
              <img
                style="height: 148px"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              >
              <span class="text">{{ file.name }}</span>
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in" />
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download" />
                </span>
                <!-- <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span> -->
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
    </div>
    <div
      class="cad-box flex-card"
      style="margin: 20px 0; "
    >
      <div class="obj_title">审核信息</div>

    </div>
  </div>
</template>

<script>
import fileImage from '@/assets/file_image.png'
export default {
  data () {
    return {
      fielForList: [
        {
          name: '工商执照',
          filelistName: 'fileList',
          filelistShowName: 'fileListShow'
        },
        {
          name: '卫生评价报告',
          filelistName: 'fileList1',
          filelistShowName: 'fileListShow1'
        },
        {
          name: '食品经营许可证',
          filelistName: 'fileList2',
          filelistShowName: 'fileListShow2'
        },
        {
          name: '园所环境',
          filelistName: 'fileList3',
          filelistShowName: 'fileListShow3'
        },
        {
          name: '场地证明',
          filelistName: 'fileList4',
          filelistShowName: 'fileListShow4'
        },
        {
          name: '消防检查合格说明',
          filelistName: 'fileList5',
          filelistShowName: 'fileListShow5'
        },
        {
          name: '地区备案说明',
          filelistName: 'fileList6',
          filelistShowName: 'fileListShow6'
        }
      ],
      ruleForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      loading: false,
      idS: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileImage,
      fileSumList: {
        fileList: [],
        fileListShow: [],
        fileList1: [],
        fileListShow1: [],
        fileList2: [],
        fileListShow2: [],
        fileList3: [],
        fileListShow3: [],
        fileList4: [],
        fileListShow4: [],
        fileList5: [],
        fileListShow5: [],
        fileList6: [],
        fileListShow6: [],
        fileList7: [],
        fileListShow7: []
      },
      fromdata: {
        name: '',
        time: '',
        html: ''
      }
    }
  },
  created () {
    const { id } = this.$route.query
    this.idS = id
  },
  mounted () {},
  methods: {
    handleSubmit () {
      console.log(this.fileSumList, 'fileSumList')
    },
    handleRemove (file, item) {
      console.log(file)

      this.fileSumList[item.filelistName] = this.fileSumList[
        item.filelistName
      ].filter((item) => item.uid !== file.uid)
      this.fileSumList[item.filelistShowName] = this.fileSumList[
        item.filelistShowName
      ].filter((item) => item.uid !== file.uid)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      console.log(file)
    },
    handleBefore (file) {
      console.log(file, 'handleBefore')
    },
    handleFileSuccess (response, file, fileList, item) {
      this.fileSumList[item.filelistName].push({
        uid: file.uid,
        name: response.data.name,
        url: response.data.url
      })
      let fileExtension = response.data.url.split('.').pop() // 获取文件后缀
      fileExtension = fileExtension.toLowerCase() // 将后缀转换为小写，以便比较
      if (['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(fileExtension)) {
        this.fileSumList[item.filelistShowName].push({
          uid: file.uid,
          name: response.data.name,
          url: response.data.url
        })
      } else {
        this.fileSumList[item.filelistShowName].push({
          uid: file.uid,
          name: response.data.name,
          url: fileImage
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-upload-list__item {
  overflow: inherit;
}
::v-deep .el-form-item {
  margin-bottom: 50px !important;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  .obj_bt_box {
    width: 100%;
    display: flex;
    align-items: center;
    // .box_label {
    // }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
